<!DOCTYPE html>
<html>
<%-include ("head.html") %>


  <body>
    <div id="app">
      <v-app>
        <%-include ("header.html") %>
          <v-main>
            <div id="particles-bg"
              style="height: 100vh; position: fixed; top: 0; width: 100%; filter: blur(1px); opacity: 0.8;"></div>
            <v-container>
              <v-row class="mt-2">
                <v-col :cols="$vuetify.breakpoint.mdAndUp?9:12">
                  <div class="mb-2 text-h6">{{kind=='tv'?"电视剧":"电影"}}名称：{{source.name}}</div>
                  <div style="width: 100%;">
                    <div style="padding-top: 56.5%;position:relative;">
                      <div style="position: absolute;top:0;left: 0;width: 100%;height: 100%;">
                        <div style="width: 100%;height: 100%;" id="player"></div>
                      </div>
                    </div>
                  </div>
                </v-col>
                <v-col :cols="$vuetify.breakpoint.mdAndUp?3:12">
                  <div>
                    <v-card class="mb-5">
                      <v-list-item>
                        <v-list-item-content>
                          <div class="mb-2 text-h6">
                            <div> {{kind=='tv'?"电视剧":"电影"}}</div>
                          </div>
                          <div style="font-size: 1.5rem; font-weight: 400; margin-bottom: 10px;">
                            {{source.name}}
                          </div>
                          <v-list-item-subtitle>豆瓣评分：{{source.score}} · {{source.classify}}
                            {{kind=='tv'?`·
                            全${list.length}集`:'' }}
                          </v-list-item-subtitle>
                          <div
                            style=" margin-top: 4px; font-size: .875rem;color: rgba(0,0,0,.6);overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;">
                            简介：{{source.desc}}
                          </div>
                        </v-list-item-content>
                        <v-list-item-avatar tile width="100" height="150" v-if="$vuetify.breakpoint.mdAndUp">
                          <v-img :src="source.pic"></v-img>
                        </v-list-item-avatar>
                      </v-list-item>

                    </v-card>
                    <v-card v-if="kind=='tv'">
                      <v-card-title>剧集列表</v-card-title>
                      <div class="d-flex flex-wrap justify-space-around pa-3" style="width: auto;">
                        <div style="position: relative;" v-for="(item,idx) in list" class="mb-3 mx-2" :key="idx">
                          <v-btn @click="playHandle(item)" large
                            :style="{color: item.idx == play_idx?'#00cc4c':'black'}">{{item.idx}}
                          </v-btn>
                          <div v-if="item.idx == play_idx" style="
                            position: absolute;
                            bottom: 1px;
                            left: 3px;
                            width: 10px;
                            height: 8px;
                            background: url(/public/images/playon-green.gif)
                              no-repeat;
                          "></div>
                        </div>
                        <div v-for="n in 5" :key="n" style="width: 78px;" class="mb-3 mx-2"></div>
                      </div>
                    </v-card>
                  </div>
                </v-col>
              </v-row>
            </v-container>
          </v-main>
      </v-app>
    </div>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: {
          uri: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
          source: {},
          list: [],
          source_id: null,
          play_idx: null,
          kind: 'tv',
          searchVal: '',
          // uri: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
        },
        methods: {
          searchHandle,
          initPlayer() {
            let config = {
              id: 'player',
              url: this.uri,
              plugins: this.uri.indexOf('mp4') != -1 ? [] : [HlsPlayer],
              width: '100%',
              height: '100%',
              autoplay: true,
              loop: false,
            };
            let player = new Player(config);
            let Events = Player.Events;
            let that = this;
            player.on(Events.ENDED, () => {
              if (that.kind == 'tv' && that.play_idx < this.list.length) {
                Snackbar.show({ text: '本集播放结束，稍后为你播放下一集~', showAction: false, });
                setTimeout(() => {
                  window.location.href = `/detail?id=${that.source_id}&kind=${that.kind}&play=${that.play_idx + 1}`;
                }, 3000);
              }

            });
          },
          async getTvDetail(id) {
            try {
              let ret = await axios.post('/v1/web/tv/info', { id });
              this.source = ret.data.data;
              this.source.pic = base.public_tv_img + this.source.pic;
              this.list = ret.data.data.teleplay_list.sort((a, b) => Number(a.idx) - Number(b.idx))
                .map(a => ({ ...a, link: `${base.public_tv_space}${this.source.word}/${a.link}` }));
              let play_dat = this.list.find(a => a.idx == this.play_idx);
              this.uri = play_dat.link;
              console.log(this.uri)
              // this.uri = "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4";
            } catch (e) {
              let msg = `获取电视剧详细信息失败，请稍后重试~`;
              console.log(e);
              Snackbar.show({ text: msg, showAction: false, });
            }
          },
          async getMovieDetail(id) {
            try {
              let ret = await axios.post('/v1/web/movie/info', { id });
              this.source = ret.data.data;
              this.uri = `${base.public_movie_space}${this.source.link}`;
              this.source.pic = base.public_movie_img + this.source.pic;
            } catch (e) {
              let msg = `获取电视剧详细信息失败，请稍后重试~`;
              console.log(e);
              Snackbar.show({ text: msg, });
            }
          },
          playHandle(params) {
            window.location.href = `/detail?id=${this.source_id}&kind=${this.kind}&play=${params.idx}`;
          }
        },
        async mounted() {
          let params = Qs.parse(window.location.href.split("?")[1]);
          if (params.kind == undefined && params.id == undefined) {
            Snackbar.show({ text: `参数错误~`, });
          }
          this.kind = params.kind;
          if (params.kind == 'tv') {
            this.source_id = params.id;
            this.play_idx = params.play == undefined ? 1 : Number(params.play);
            await this.getTvDetail(params.id);
          }
          if (params.kind == 'movie') {
            this.source_id = params.id;
            await this.getMovieDetail(params.id);
          }
          this.initPlayer();
          particlesJS('particles-bg', particles)
        },
      });
    </script>
  </body>

</html>